import axios from 'axios';
import { React, useEffect, useState } from 'react';
import '../../../index.css';
import { Pagination } from 'antd';
import InterIP from '../../../IP/IP'
import { useNavigate } from 'react-router';
export default function Notpaid() {

  const [unsentarr, setunsentarr] = useState([]);
  const [twig, setTwig] = useState()
  const navigate = useNavigate()

  useEffect(() => {
    const toolsArr = [];
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selIndent", {
      user_id: userID,
      page: 1,
    }).then((res) => {
      var bigArr = res.data;
      axios.post('http://localhost:3000/index/selStore', {}).then((res) => {
        let arr = [];
        bigArr.forEach((v, k) => {
          arr[k] = {
            store_id: '',
            order_id: [],
            store_name: v.store_name,
            boss_name: '',
            boss_phone: '',
            cart_totalPrice: 0,
            product: [],
            order_time: v.order_time,
            order_status: v.order_status,
            total_price: 0,
          }
        });

        for (let i = 0; i < arr.length; i++) {
          for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].store_name === arr[j].store_name && arr[i].order_time === arr[j].order_time) {
              arr.splice(j, 1);
              j--;
            }
          }
        }
        res.data.forEach((value) => {
          arr.forEach((v) => {
            if (v.store_name === value.store_name) {
              v.store_id = value.store_id;
              v.boss_name = value.boss_name;
              v.boss_phone = value.boss_phone;
            }
          })
        })

        arr.forEach((v) => {
          bigArr.forEach((val) => {
            if (v.store_name === val.store_name && v.order_time === val.order_time) {
              let value = JSON.parse(val.product)
              let smallArr = {
                product_name: value.product_name,
                product_number: value.product_number,
                product_specification: value.product_specification,
                product_price: value.product_price,
                product_img: value.product_img,
                buy_number: value.buy_number,
                product_id: value.product_id,
                store_name: value.store_name,
                cart_id: val.cart_id,
                boss_name: v.boss_name,
                boss_phone: v.boss_phone,
              }
              v.total_price = parseFloat(value.product_price) * parseFloat(value.buy_number);
              v.product.push(smallArr);
              v.order_id.push(val.order_id)
              v.address_id = val.address_id;
            }
          })
        })
        arr.forEach((v, k) => {
          if (v.order_status === '待付款') {
            toolsArr.push(v)
          }
        })
        setTwig((twig) => twig = toolsArr.length)
        setunsentarr((unsentarr) => unsentarr = toolsArr);
      })
    })
  }, []);

  function allorder_look(data) {
    return () => {
      navigate("/home/person/orderdetails", {
        state: {
          data: data,
        }
      })
    }
  }
  function goPayment(data) {
    return () => {
      navigate("/home/submitsuccess/apay", {
        state: {
          sumMoneyAll: parseFloat(data.total_price),
          date: data.order_time,
          store: data.store_name,
          shops: 1,
          address_id: data.address_id,
        }
      })
    }
  }
  return (
    <div>
      {unsentarr.map((data, k) => {
        return (
          <div className="allorder_card" key={data.order_id}>
            <div className="allorder_card_top">
              <ul>
                <li>订单号:<span>{data.order_id}</span></li>
                <li>下单日期:<span>{data.order_time}</span></li>
                <li>{data.stroe_id}</li>
                <li>订单状态:<span>{data.order_status}</span></li>
              </ul>
            </div>
            <div className="allorder_bottom">
              <div className="allorder_card_main">


                {unsentarr[k].product.map((commodity, key) => {
                  return (
                    <div className="allorder_card_main_left" key={key}>
                      <div className="allorder_card_left">
                        <div className="allorder_card_img">
                          <img src={commodity.product_img} alt=""></img>
                        </div>
                        <span>{commodity.product_name}</span>
                      </div>

                      <div className="allorder_card_left">
                        <span>{commodity.product_number}{commodity.product_specification}</span>
                      </div>

                      <div className="allorder_card_left">
                        <span>￥</span>
                        <span>{commodity.product_price}</span>
                        <span>&nbsp;&nbsp;*&nbsp;&nbsp;</span>
                        <span>{commodity.buy_number}</span>
                      </div>
                    </div>
                  )
                })}


              </div>
              <div className="lfy_small">
                <div className=" allorder_card_right1">
                  <div>店铺合计：￥<span>{data.total_price}</span></div>
                  <div>(含运费:￥<span>{data.freight}</span>)</div>
                </div>
                <div className="allorder_card_right2">
                  <button className="allorder_chakan" onClick={allorder_look(data)}>查看详情</button>
                  <button className='allorder_zhifu' onClick={goPayment(data)}>去支付</button>
                  <button className='allorder_quxiao'>取消订单</button>
                </div>
              </div>
            </div>
          </div>
        )
      })}
      <Pagination className="allorder_page" total={twig} pageSize={6}></Pagination>
    </div>
  )
}


